<template>
	<div>
		<el-scrollbar ref="terminalScrollbarRef" :max-height="500" class="terminal-scrollbar">
			<el-timeline class="terminal-timeline" v-if="terminal.state.taskList.length">
				<el-timeline-item
					v-for="(item, idx) in terminal.state.taskList"
					:key="idx"
					class="task-item"
					:class="'task-status-' + item.status"
					:type="getTaskStatus(item.status)['statusType']"
					center
					:timestamp="item.createTime"
					placement="top"
				>
					<el-card>
						<div>
							<el-tag :type="getTaskStatus(item.status)['statusType']">{{ getTaskStatus(item.status)['statusText'] }}</el-tag>
							<el-tag class="block-on-failure-tag" v-if="item.status == taskStatus.Executing || item.status == taskStatus.Connecting" type="danger">
								请勿刷新浏览器
							</el-tag>
							<span class="command">{{ item.command }}</span>
							<div class="task-opt">
								<el-button
									title="刷新"
									v-if="item.status == taskStatus.Failed || item.status == taskStatus.Unknown"
									size="small"
									v-blur
									type="warning"
									icon="ele-RefreshRight"
									circle
									@click="terminal.retryTask(idx)"
								/>
								<el-button @click="terminal.removeTask(idx)" title="删除" size="small" v-blur type="danger" icon="ele-Delete" circle />
							</div>
						</div>
						<template v-if="item.status != taskStatus.Waiting">
							<div
								v-if="item.status != taskStatus.Connecting && item.status != taskStatus.Executing"
								@click="terminal.toggleTaskMessage(idx)"
								class="toggle-message-display"
							>
								<span>查看运行日志</span>
								<svgIcon :name="item.showMessage ? 'ele-ArrowUp' : 'ele-ArrowDown'" size="16" color="#909399" />
							</div>
							<div
								v-if="
									item.status == taskStatus.Connecting ||
									item.status == taskStatus.Executing ||
									(item.status > taskStatus.Executing && item.showMessage)
								"
								class="exec-message"
								:class="'exec-message-' + item.uuid"
							>
								<pre v-for="(msg, index) in item.message" :key="index" class="message-item">{{ msg }}</pre>
							</div>
						</template>
					</el-card>
				</el-timeline-item>
			</el-timeline>
			<el-empty v-else :image-size="80" description="还没有任务..." />
		</el-scrollbar>
		<div class="terminal-buttons">
			<el-button class="terminal-menu-item" v-blur @click="addTerminalTask('test.command')"> 测试命令 </el-button>
			<el-dropdown class="ml-2">
				<span class="el-dropdown-link">
					<el-button class="terminal-menu-item" v-blur > 查看版本 </el-button>
				</span>
				<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item @click="addTerminalTask('common.version.npm')">npm</el-dropdown-item>
					<el-dropdown-item @click="addTerminalTask('common.version.node')">node</el-dropdown-item>
					<el-dropdown-item @click="addTerminalTask('common.version.php')">php</el-dropdown-item>
				</el-dropdown-menu>
				</template>
			</el-dropdown>
			<el-dropdown class="ml-2">
				<span class="el-dropdown-link">
					<el-button class="terminal-menu-item" v-blur >npm镜像源</el-button>
				</span>
				<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item @click="addTerminalTask('common.npm_set_registry.npm')">官方源</el-dropdown-item>
					<el-dropdown-item @click="addTerminalTask('common.npm_set_registry.taobao')">淘宝源</el-dropdown-item>
					<el-dropdown-item @click="addTerminalTask('common.npm_set_registry.tencent')">腾讯源</el-dropdown-item>
					<el-dropdown-item @click="addTerminalTask('common.npm_set_registry.huawei')">华为源</el-dropdown-item>
				</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, nextTick } from 'vue';
import { ElScrollbar } from 'element-plus';
import type { TimelineItemProps } from 'element-plus';
import { useTerminal } from '/@/stores/terminal';
import { taskStatus } from '/@/enums/terminalEnum';

const props = defineProps({
	taskListData: {
		type: Array,
		default: function () {
			return [];
		},
	},
	isClearTask: {
		type: Boolean,
		default: false,
	},
});

const terminal = useTerminal();
const terminalScrollbarRef = ref<InstanceType<typeof ElScrollbar>>();

const getTaskStatus = (status: number) => {
	let statusText = '未知';
	let statusType: TimelineItemProps['type'] = 'info';
	switch (status) {
		case taskStatus.Waiting:
			statusText = '等待执行';
			statusType = 'info';
			break;
		case taskStatus.Connecting:
			statusText = '连接中...';
			statusType = 'warning';
			break;
		case taskStatus.Executing:
			statusText = '执行中...';
			statusType = 'warning';
			break;
		case taskStatus.Success:
			statusText = '执行成功';
			statusType = 'success';
			break;
		case taskStatus.Failed:
			statusText = '执行失败';
			statusType = 'danger';
			break;
		case taskStatus.Unknown:
			statusText = '执行结果未知';
			statusType = 'danger';
			break;
	}
	return {
		statusText: statusText,
		statusType: statusType,
	};
};

const addTerminalTask = (command: string, extend = '', callback: Function = () => {}) => {
	terminal.addNewTask(command, extend, callback);

	// 任务列表滚动条滚动到底部
	nextTick(() => {
		if (terminalScrollbarRef.value && terminalScrollbarRef.value.wrapRef) {
			terminalScrollbarRef.value.setScrollTop(terminalScrollbarRef.value.wrapRef.scrollHeight);
		}
	});
};

onBeforeMount(() => {

	if(props.isClearTask) {
		terminal.clearAllTasks();
	}

	if(props.taskListData.length > 0) {
		// 初始化任务列表
		props.taskListData.forEach((item: any) => {
			addTerminalTask(item.command, item.extend, item.callback);
		});		
	}
});

onMounted(() => {
});

defineExpose({
	addTerminalTask,
});
</script>

<style lang="scss" scoped>
.terminal-timeline {
	padding: 0 15px;
}
.command {
	font-size: var(--el-font-size-large);
	font-weight: bold;
	margin-left: 10px;
}
.exec-message {
	color: var(--ba-bg-color-overlay);
	font-size: 12px;
	line-height: 16px;
	padding: 6px;
	background-color: #424251;
	margin-top: 10px;
	min-height: 30px;
	max-height: 200px;
	overflow: auto;
	&::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}
	&::-webkit-scrollbar-thumb {
		background: #c8c9cc;
		border-radius: 4px;
		box-shadow: none;
		-webkit-box-shadow: none;
	}
	&::-webkit-scrollbar-track {
		background: var(--ba-bg-color);
	}
	&:hover {
		&::-webkit-scrollbar-thumb:hover {
			background: #909399;
		}
	}
}

.exec-message .message-item {
	color: white;
}

@supports not (selector(::-webkit-scrollbar)) {
	.exec-message {
		scrollbar-width: thin;
		scrollbar-color: #c8c9cc #eaeaea;
	}
}
.toggle-message-display {
	padding-top: 10px;
	font-size: 13px;
	color: var(--el-text-color-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.task-opt {
	display: none;
	float: right;
}
.task-item.task-status-0:hover,
.task-item.task-status-3:hover,
.task-item.task-status-4:hover,
.task-item.task-status-5:hover {
	.task-opt {
		display: inline;
	}
}
.block-on-failure-tag {
	margin-left: 10px;
}
.terminal-menu-item {
	margin-bottom: 12px;
}
.terminal-menu-item + .terminal-menu-item {
	margin-left: 12px;
	margin-bottom: 12px;
}
.terminal-buttons {
	display: block;
	width: fit-content;
	margin: 0 auto;
	padding-top: 12px;
}
.config-buttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 20px;
	padding-right: 20px;
}
:deep(.main-dialog) {
	--el-dialog-padding-primary: 16px 16px 0 16px;
	.el-dialog__body {
		margin-top: 16px;
	}
}
:deep(.ba-terminal-dialog) {
	--el-dialog-width: 46% !important;
	.el-loading-spinner {
		--el-loading-spinner-size: 20px;
	}
}
@media screen and (max-width: 768px) {
	:deep(.ba-terminal-dialog) {
		--el-dialog-width: 80% !important;
	}
}
@media screen and (max-width: 540px) {
	:deep(.ba-terminal-dialog) {
		--el-dialog-width: 94% !important;
	}
}
</style>
